<template>
  <qh-page-view current="1" title="分类" :showNavbar="false">
    <view class="top-box">
      <view class="top-content">
        <!-- <qh-navbar title="分类" bgColor="transparent"></qh-navbar> -->
        <uni-status-bar></uni-status-bar>

        <view class="search-box flex-cn">
          <view class="navbar-left flex-cn" style="margin-right: 24rpx" @click.stop="backHome">
            <view @click.stop="backHome" class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"> </view>
          </view>

          <view class="search-content flex-cn" @click="toSearchGoods">
            <text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
            <view class="search-input">请输入商品名称</view>
            <view class="search-btn flex-cn-cn">搜索</view>
          </view>
        </view>
        <!-- <view class="search-box flex-cn">
              <view
              class="navbar-left flex-cn"
              style="margin-right: 24rpx"
              @click.stop="backHome"
            >
              <view class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"> </view>
            </view>

            <view class="search-content flex-cn" @click="toSearchGoods">
              <text class="qh-rt-single qh-rt-a-zu2432 search-icon"></text>
              <view class="search-input">请输入商品名称</view>
              <view class="search-btn flex-cn-cn">搜索</view>
            </view>
            <view style="width: 320rpx;"></view>
        </view> -->

        <view class="first-category-box flex-cn">
          <!-- 一级分类 -->
          <view class="first-category-scroll flex-row-100">
            <scroll-view scroll-x :scroll-left="firstCategoryLeft">
              <view class="first-category-item-box">
                <view class="first-category-item flex-col-cn-cn" v-for="(item, index) in categoryList" :key="index"
                  :class="[
                    searchForm.person1 == item.id ? 'active' : '',
                    'first-category-' + index,
                  ]" @click="chooseFirstCategory(index, true, item)">
                  <qh-goods-image :size="searchForm.person1 == item.id ? 88 : 84" shape="circle" :src="item.image_url"
                    border :border-color="searchForm.person1 == item.id
                      ? 'var(--primary-color)'
                      : '#FFFFFF'
                      " icon="qh-rt-a-zu4494" color="var(--primary-color)">
                  </qh-goods-image>
                  <text class="first-category-name text-ellipsis" :class="{ active: searchForm.person1 == item.id }">{{
                    item.class_name }}</text>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="first-category-btn flex-col-cn-cn flex-wrap" @click="showFirstCategory = true">
            <text>全部</text>
            <text class="qh-rt-single qh-rt-a-zu4413 first-category-icon"></text>
          </view>
        </view>
      </view>
    </view>

    <view class="flex-column-100 flex category-content">
      <!-- 侧边栏二级分类 -->
      <view class="category-left-box tabbar-page-bottom" v-if="secondCategory.length">
        <view class="category-left-item flex-cn-cn" v-for="(item, index) in secondCategory" :key="index"
          :class="{ active: searchForm.person2 == item.id }" @click="ClickChooseSecondCategory(index, item)">
          <text class="category-left-item-name text-ellipsis-row2">{{
            item.class_name
          }}</text>
        </view>
      </view>
      <view class="category-right-box flex-row-100 flex-column tabbar-page-bottom">
  
        <view v-if="hasImageUrl " class="animated-view" :class="{ 'show': isVisible }" style="height: 100vh;overflow-y: auto;"  :style="skuBoxStyle">
          <view>
            <view class="grid-container">
              <view class="grid-item" v-for="(logo, logoIndex) in logo_list" :key="logoIndex"
                :class="{ 'active': activeItem === logoIndex }" @click="handleClick(logoIndex, logo)"
                @touchstart="handleTouchStart(logoIndex)" @touchend="handleTouchEnd">
                <image :src="logo.image_url"></image>
                <text>{{ logo.class_name }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 三级分类-->
        <scroll-view v-if="isThree && !hasImageUrl && thirdCategory.length" class="category-right-top-box" scroll-x
          :scroll-left="scrollLeft">
          <view class="category-third-item" v-for="(item, index) in thirdCategory" :key="index"
            :class="{ active: searchForm.person3 == item.id }" @click="chooseThirdCategory(index, item)">
            {{ item.class_name }}
          </view>
        </scroll-view>

        <view v-if="!isThree" class="category-right-top-box">
          <view class="three-button" @click="handlerThree">
            <view style="display: flex;align-items: center;justify-content: center;width: 50px;">
                <view style="margin-right: 5px;color: var(--primary-color);" class="feiIconfont icon-houtui-kong"></view>
              <text style="color: var(--primary-color);">返回</text>
              </view>
          </view>
        </view>

        <!-- 销量 价格 -->
        <view class="flex-box" v-if="!hasImageUrl">
          <view @click="muchTab('1', index, item)" class="text-back textBack">
            <text :class="{ 'active': activeTab === '1' }"
              :style="{ color: activeTab === '1' ? 'black' : '#666666' }">销量</text>
          </view>

          <view @click="muchTab('2', index, item)" class="text-back textBack textMuch">
            <text :class="{ 'active': activeTab === '2' }"
              :style="{ color: activeTab === '2' ? 'black' : '#666666' }">价格</text>
            <view class="triangle-icons">
              <view style="margin-left: 3px;" class="triangle-icon triangle-icon-up" :class="{ 'active': isActiveUp }">
              </view>
              <view style="margin-left: 3px;margin-top: 2px;" class="triangle-icon triangle-icon-down"
                :class="{ 'active': isActiveDown }"></view>
            </view> 
          </view>

          <!-- 这里是抽屉的内容 -->
          <view v-if="showDrawer" class="drawer"  @click="closeDrawer">
            <view class="drawerContent" :animation="animationData" @click.stop>
              <view class="drawerName">
                <view style="font-weight: bold;" class="drawerName_title">价格区间(元)</view>
                <view style="position: relative;"><text @click="closeDrawer"
                    class="drawerName_icon qh-rt-single qh-rt-a-zu4416 choose-sku-close-icon"></text></view>
              </view>
              <view style="height: 100%;">
                <view class="drawerMoney" style="height: 300rpx;">
                  <view class="drawerMoney_interval" v-for="(item, index) in drawerMoneyList" :key="index"
                    @click="changeColor(item, index)"
                    :style="{ backgroundColor: selectedIndex === index ? '#FFB73F33' : '', border: selectedIndex === index ? '1px solid #FFB73F' : '1px solid #EBEBEB' }">
                    <text style="font-size: 28rpx;" :style="{ color: selectedIndex === index ? '#FFB73F' : '' }">{{ item
                      }}</text>
                  </view>
                </view>
                <view class="drawerName">
                  <view class="drawerName_title">自定义价格:</view>
                </view>
                <view class="drawerMoney">
                  <view class="drawerMoney_interval">
                    <input class="input-container" placeholder="￥ 0" @click="handerlCustom" v-model="customPriceOne"
                      type="digital" />
                  </view>
                  <text>-</text>
                  <view class="drawerMoney_interval">
                    <input class="input-container" placeholder="￥ 0" @click="handerlCustom" v-model="customPriceTwo"
                      type="digital" />
                  </view>
                </view>
              </view>

              <view class="buttonBox" style="height: 480rpx;">
                <!-- 按钮内容 -->
                <view class="drawerMoney">
                  <view class="drawerMoney_interval" @click="handelrReset">
                    <view style="font-weight: bold;" class="drawerName_title">重置</view>
                  </view>

                  <view class="drawerMoney_interval" style="background-color: #FFB73F;"
                    @click="handelrComplete(index, item)">
                    <view style="font-weight: bold;color: #fff;" class="drawerName_title">完成</view>
                  </view>
                </view>
              </view>
            </view>
          </view>


          <view @click="changeTab('0', index, item)" class="text-back  modal" style="width: 100rpx;">
            <block v-if="!customValue || customValue == '0-0'">
              <view class="price-icon">
                <text class="price-symbol">￥</text>
              </view>
              <text style="margin: 0 10rpx;"> - </text>
              <view class="price-icon">
                <text class="price-symbol">￥</text>
              </view>
            </block>
            <text v-else> {{ customValue }}</text>
          </view>
        </view>


        <view class="goods-content flex-column-100" :class="{ 'pad-r-16': !secondCategory.length }" :style="skuBoxStyle">

          <qh-scroll-view  :lowerThreshold="100" :height="scrollHeight" :scrollTop="scrollTop" @scrolltolower="getGoodsList" refresher-enabled
            @refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh" :lowerTriggered="isLoading"
            :loaded="goodsList.length >= 5 && !isLoading && !canLoad" :empty="(!goodsList.length && !isLoading) ||
              (!categoryList.length && categoryLoaded)
              ">
            <view class="goods-item border-bottom flex" v-for="(item, index) in goodsList" :key="index"
              @click="toDetail(item.id)">

              <view class="animationIcon">
                <view v-for="animation in animations" :key="animation.id">
                  <view v-if="animation.active && animationIndex === index" class="inner">
                    <view class="balt"></view>
                  </view>
                </view>
              </view>


              <view style=" display: flex;
    justify-content: center;
    align-items: center;position: relative;">

                <qh-goods-image :src="item.goods_image" size="170" radius="12"></qh-goods-image>
                <view v-if="item.goods_num <= 0" class="class-goods-img">已售空</view>
              </view>
              <view class="goods-item-right-box flex-col-spb flex-row-100"
                :class="secondCategory.length ? 'pad-r-24' : 'pad-r-6'">
                <view class="goods-name text-ellipsis-row2">{{
                  item.goods_name
                }}</view>

                <view class="sku_tags" v-if="item.subheading">
                  <text class="sku_tag">{{ item.subheading }}</text>
                </view>

                <view style="height: 50rpx;" v-if="!item.subheading">
                </view>

                <view class="tags-container" v-if="item.keywords_desc && item.keywords_desc.length">
                  <view v-for="(val, i) in item.keywords_desc " :key="i" class="tag_label"
                    :style="{ 'padding-left': i === 0 ? '0' : '10rpx' }">{{ val.desc_2 }}</view>
                </view>

                <!-- <view @click.stop="()=>{}" class="progress-tab" v-if="
                  goodsNum(item.goods_num, item.more_num) !== null &&
                  item.goods_num > 10 &&
                  goodsNum(item.goods_num, item.more_num) > 1
                ">
                   <view class="progress-bar">
                    <view class="progress-bar-inner" :style="'width: ' + goodsNum(item.goods_num, item.more_num) > 100 ? 100 : goodsNum(item.goods_num, item.more_num) + '%'">
                      <text class="progress-text">{{ goodsNum(item.goods_num, item.more_num) > 100 ? 100 : goodsNum(item.goods_num, item.more_num) }}%</text>
                    </view>
                  </view>
                </view> -->

                <view @click.stop="()=>{}"  style="display: flex; align-items: center;" v-if="item.goods_num <= 10 || item.coupon_name">
                  <view class="preferentialCalss" v-if="item.goods_num <= 10 && item.goods_num != 0">
                    <text style="color: #ff3a3a; font-size: 20rpx">剩于{{ item.goods_num }}件</text>
                  </view>

                  <view @click.stop="()=>{}"  style="display: flex;justify-content: center;align-items: center;margin-left: 12rpx;">
                    <view class="preferentialCalss" v-if="item.coupon_name"><text
                        style="color: #FF3A3A;font-size: 21rpx;">{{ item.coupon_name }}</text></view>
                  </view>
                </view>

                <view @click.stop="()=>{}"   style="display: flex;justify-content: space-between;align-items: center;">
                  <view class="goods-price-box">
                    <view v-if="showPlusPrice(item)" class="flex-cn">
                      <text class="plus-price-color">￥{{ item.plus_price }}</text>
                      <text class="plus-price-icon">PLUS</text>
                    </view>
                    <view v-if="showVipPrice(item)" class="flex-cn">
                      <text class="price-color">￥{{ item.shop_mem_price }}</text>
                      <text class="vip-price-icon">VIP</text>
                    </view>
                    <view v-if="showOnlinePrice(item)" class="price-color">￥{{ item.online_price }}</view>
                    <view class="flex-cn" v-if="item.rebate > 0">
                          <!-- <text class="plus-price-color">￥</text>
                          <text class="plus-price-color" style="font-size: 22rpx;"> {{ item.rebate }}</text>
                          <text class="plus-price-icon">返福气值</text> -->
                          <view class="temperature-box">
                            {{ item.rebate }}<text style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
                          </view>
                      </view>
                  </view>

                  <!-- <view
                   @click.self="()=>{}" style="display: flex; justify-content: flex-end;align-items: flex-end;width: 326rpx;height: 12rpx;"
                  >
                    <view class="container">
                      <view  class="button-container" style="display: flex;">
                            <view v-if="!item.skuDetailList " style="display: flex;">
                              <view v-if="item.num > 0" :disabled="item.num === 0 || item.num < 0" @click="reduceShopping(item, index)" class=" roundBtn icontext" :class="buttonClass(item) ? 'hidden' : 'visible-in'" style="display: flex;justify-content: center;align-items: center;">
                                    <text style="color: #FFB73F;font-size: 24rpx;" class=" icontext qh-rt-single qh-rt-a-zu4424 car-num-icon" :class="{'rotate': item.num === 0}"></text>
                              </view>
                              
                              <view v-if="item.num > 0" style="width: 40rpx; display: flex; align-items: center; justify-content: center;">
                                    <view style="font-size: 20rpx;">{{ item.num }}</view>
                              </view>

                              <view class="roundBtn roundBtnBack" @click="addShopping(item, index)" style="flex: 1;margin-right: 10rpx;">
                                    <text style="color: #fff;font-size: 24rpx;" class=" icontext qh-rt-single qh-rt-a-zu4423 car-num-icon" :class="{'rotate': item.num > 0}"></text>
                              </view>

                            </view>
                            
                              <view   v-if="item.skuDetailList "> 
                                <img
                                  @click="addShopping(item, index)"
                                  style="margin-right: 16rpx; width: 56rpx; height: 56rpx"
                                  src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a8cec859721757.png"
                                />
                              </view>
                          </view>
                    </view>

                  </view> -->

                  <view @click.stop="() => { }"
                    style="display: flex; justify-content: flex-end;align-items: flex-end;">
                    <view class="container">
                      <view class="button-container" style="display: flex;">
                        <view v-if="!item.skuDetailList" style="display: flex;">
                          <view v-if="item.num > 0" :disabled="item.num === 0 || item.num < 0"
                            @click="reduceShopping(item, index)" class=" roundBtn icontext"
                            :class="buttonClass(item) ? 'hidden' : 'visible-in'"
                            style="display: flex;justify-content: center;align-items: center;">
                            <text style="color: #FFB73F;font-size: 24rpx;"
                              class=" icontext qh-rt-single qh-rt-a-zu4424 car-num-icon"
                              :class="{ 'rotate': item.num === 0 }"></text>
                          </view>

                          <view v-if="item.num > 0"
                            style="width: 40rpx; display: flex; align-items: center; justify-content: center;">
                            <view style="font-size: 20rpx;">{{ item.num }}</view>
                          </view>

                          <view class="roundBtn roundBtnBack" @click="addShopping(item, index)"
                            style="flex: 1;margin-right: 10rpx;">
                            <text style="color: #fff;font-size: 24rpx;"
                              class=" icontext qh-rt-single qh-rt-a-zu4423 car-num-icon"
                              :class="{ 'rotate': item.num > 0 }"></text>
                          </view>
                        </view>


                        <view v-if="item.skuDetailList">
                          <img @click="addShopping(item, index)" style=" width: 26px; height: 26px"
                            src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a8cec859721757.png" />
                        </view>

                      </view>

                    </view>
                  </view>


                  <!-- <text class="qh-rt-single qh-rt-tianjia add-car-icon" @click.stop="addToCar(index)"></text> -->
                </view>
              </view>

            </view>
          </qh-scroll-view>
        </view>


      </view>
    </view>

    <!-- 全部分类弹窗 -->
    <view v-show="showFirstCategory" class="popup-box" :style="popupStyle" @click="showFirstCategory = false">
      <view class="popup-title flex-spb-cn">
        <text>全部分类</text>
        <text class="qh-rt-single qh-rt-a-zu4416 close-popup-icon" @click="showFirstCategory = false"></text>
      </view>
      <view class="popup-content" @click.stop="showFirstCategory = true">
        <view class="first-category-item flex-col-cn-cn" v-for="(item, index) in categoryList" :key="index"
          :class="{ active: searchForm.person1 == item.id }" @click.stop="chooseFirstCategory(index, true, item)">
          <qh-goods-image size="88" shape="circle" :src="item.image_url" border icon="qh-rt-a-zu4494" :border-color="searchForm.person1 == item.id ? 'var(--primary-color)' : '#FFFFFF'
            " color="var(--primary-color)">
          </qh-goods-image>
          <text class="first-category-name text-ellipsis">{{
            item.class_name
          }}</text>
        </view>
      </view>
    </view>

    <!-- 选择规格弹窗 -->
    <block v-if="showSelectSku">
      <choose-sku :sku="sku" :goodsinfo="goods" goodsType="1" @close="closeSku"></choose-sku>
    </block>

    <view>
      <SkuDetailsCard ref="popupComponent" :goodsinfo="goodsSizeList" :BoxStyle="1"></SkuDetailsCard>
    </view>

    <shopping-pushpins></shopping-pushpins>

  </qh-page-view>



</template>

<script>
const app = getApp().globalData;
import qhScrollMixin from "@/components/qh-scroll-view/mixins.js";
import categoryMixin from "../category/mixins"
import SkuDetailsCard from '@/components/skuDetails/skuDetails.vue'

export default {
  components: {
    SkuDetailsCard
  },
  mixins: [qhScrollMixin, categoryMixin], // 使用mixin
  data() {
    return {
      options_label_id:null,//传过来得一级
      label_type: 1,  //分类级别
      label_id: null,  //商品id
      homeIndex: 0,
      animations: [],
      animationIndex: null,
      indexes: [],
      minHeight: 0,
      maxHieght: 0,
      scrollHeight: 0,
      scrollTop: 0,
      firstCategoryWidth: 0, //一级分类横向滚动的可视宽度
      firstCategoryLeft: 0, //一级分类横向滚动的left值
      showFirstCategory: false, //是否显示全部一级分类
      categoryLoaded: false, //分类是否加载完毕
      categoryList: [], //分类列表
      secondCategory: [], //二级分类列表
      thirdCategory: [], //三级分类列表
      goodsList: [],
      isRefresh: false,
      isLoading: false,
      canLoad: true,
      searchForm: {
        goods_name: "",
        person1: "",
        person2: "",
        person3: "",
        page: 1,
        limit: 10,
      },
      showSelectSku: false,
      goods: {},
      sku: {},
      initStatus: null,

    };
  },
  
  computed: {

    skuBoxStyle() {
      return "margin-bottom:" + (this.$store.bottomHeight + 40) + "rpx";
    },
    popupStyle() {
      let top = this.$store.statusBarHeight + 40;
      return `height:calc(100vh - ${top}px - ${0
        }rpx);top:${top}px`;
    },
  },

  async onLoad(options) {
    this.options_label_id = options.label_id
    await this.$onLaunched;
    await this.getCategory();
    options.index == -1 ? this.initStatus = true : this.initStatus = false
    options.index == -1 ? (this.showFirstCategory = true, this.homeIndex = 0) : this.homeIndex = options.index;
    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".first-category-scroll")
        .boundingClientRect((rect) => {
          this.firstCategoryWidth = rect.width;
        })
        .exec();
    });
  },

  methods: {
    //后退
    backHome() {
      uni.navigateBack();
    },
    //搜索商品
    toSearchGoods() {
      uni.navigateTo({
        url: "/pages/mer/goods/search/search?search=1",
      });
    },
    //选择一级分类
    chooseFirstCategory(index, scroll = true, item) {
      this.initStatus ? this.initStatus = false : this.showFirstCategory = false;

       //这是三级分类得判断
       this.isThree = true
      this.activeItem = null; 
       if (item && item.subset && item.subset.length > 0 && item.subset[0]?.subset) {
        this.hasImageUrl = item.subset[0].subset.some(sub => 
          sub.image_url !== undefined && 
          sub.image_url !== null && 
          sub.image_url !== ''
        );
        this.logo_list = item.subset[0].subset;
      } else {
        this.hasImageUrl = false;
      }
      
      if (item) {  //这里判断一进来是否有二级 没有则 走一级
        if (item.subset && item.subset.length > 0) {
          this.label_id = item.subset[0].id;
          this.label_type = item.subset[0].type;
        } else {
          this.label_id = item.id;
          this.label_type = 1;
        }
      }
      

      this.secondCategory =
        this.categoryList[index].subset &&
          this.categoryList[index].subset.length
          ? this.categoryList[index].subset
          : [];
      this.searchForm.person1 = this.categoryList[index].id;
      this.chooseSecondCategory(this.secondCategory.length ? 0 : -1);
      //横向显示的一级分类自动滚动
      if (scroll) {
        this.$nextTick(() => {
          const query1 = uni.createSelectorQuery().in(this);
          query1
            .select(".first-category-item-box")
            .boundingClientRect((rect) => {
              const query2 = uni.createSelectorQuery().in(this);
              query2
                .select(".first-category-" + index)
                .boundingClientRect((rect1) => {
                  let left = rect1.left - rect.left;
                  this.firstCategoryLeft = left - 140;
                })
                .exec();
            })
            .exec();
        });
      }
    },
    //选择二级分类
    chooseSecondCategory(index, item) {
      this.scrollLeft = 0

      if (item) {
        this.label_id = item.id
        this.label_type = 2
      }

      if (index >= 0) {
        this.searchForm.person2 = this.secondCategory[index].id;
        this.thirdCategory = this.secondCategory[index].subset
          ? this.secondCategory[index].subset
          : [];
      } else {
        this.searchForm.person2 = "";
        this.thirdCategory = [];
      }
      this.chooseThirdCategory(this.thirdCategory.length ? 0 : -1);
    },
    //选择三级分类
    chooseThirdCategory(index, item) {
      if (item) {
        this.label_id = item.id
        this.label_type = 3
        this.searchForm.person3 = this.thirdCategory[index].id;
      }
      if (index >= 0) {
        this.$nextTick(() => {
          if (!this.minHeight) {
            this.initScroll(".goods-content", (height) => {
              console.log("this.minHeight", height);
              this.minHeight = height;
              this.scrollHeight = height;
            });
          } else {
            this.scrollHeight = this.minHeight;
          }
        });
      } else {
        this.searchForm.person3 = "";
        this.$nextTick(() => {
          if (!this.maxHeight) {
            this.initScroll(".goods-content", (height) => {
              this.maxHeight = height;
              this.scrollHeight = height;
            });
          } else {
            this.scrollHeight = this.maxHeight;
          }
        });
        console.log(this.scrollHeight, '')
      }
      this.scrollTop = 0;
      this.searchData();
    },
    //查看商品详情
    toDetail(id) {
      uni.navigateTo({
        url: "/pages/mer/goods/details/details?id=" + id,
      });
    },
    //下拉刷新
    async pullDownRefresh() {
      this.isRefresh = true;
 
      await this.searchData();
      await this.getGoodsList();
      this.isRefresh = false;
      // uni.showToast({
      // 	title: '刷新成功',
      // 	duration: 800,
      // })
    },
    async searchData() {
      this.canLoad = true;
      this.isLoading = false;
      this.searchForm.page = 1;
      this.goodsList = [];
      await this.getGoodsList();
      
      if(!this.hasImageUrl_flag){
        this.hasImageUrl = this.thirdCategory.some(sub => sub.image_url !== undefined && sub.image_url !== null && sub.image_url !== '');
        this.logo_list = this.thirdCategory
      }
      
    },


    //关闭规格弹窗
    closeSku() {
      this.showSelectSku = false;
    },
    //添加商品到购物车
    async addToCar(index) {
      if (this.goodsList[index].attribute == 2) {
        this.goods = {
          ...this.goodsList[index],
          goods_image: this.goodsList[index].path,
          goods_num: 999,
        };
        this.showSelectSku = true;
      } else {
        const res = await this.$mutations.setShoppingCar(
          {
            goods_id: this.goodsList[index].goods_id,
            num: 1,
          },
          1
        );
        if (res) {
          this.showSelectSku = false;
        }
      }
    },
    //点击搜索
    search() {
      uni.navigateTo({
        url: "/pages/product/productList/productList?type=1",
      });
    },
    //获取分类
    getCategory() {
      return new Promise(async (resolve) => {
        const { status, data, message } = await this.$request(
          // "SmallProgramApi/MerchantGoods/getGoodsClassList"
          "SmallProgramApi/Goods/getGoodsClass_v3", { pageSource: 2, store_id: 1 }
        );
        if (status != 1)
          return (
            uni.showToast({
              title: message,
              icon: "none",
            }) && resolve(false)
          );

        this.categoryList = data;
        if (data.length) {
          this.$nextTick(() => {
            let foundCategory = data.find(category => category.id === this.options_label_id);
            if (foundCategory?.subset?.length > 0) {
              this.label_id = foundCategory.subset[0].id;
            } else if (foundCategory) {
              // 如果没有subset，但找到了分类，就使用分类自己的id
              this.label_id = foundCategory.id;
            }
            this.chooseFirstCategory(this.homeIndex);
          });
        }
        this.categoryLoaded = true;
        resolve(true);
      });
    },


    //获取商品
    getGoodsList() {
      return new Promise(async (resolve) => {
        if (this.isLoading || !this.canLoad || !this.searchForm.person1)
          return resolve(false);
        this.isLoading = true;
        const { status, data, message } = await this.$request(
          "SmallProgramApi/Goods/getGoodsList_v2",
          { store_id: this.$store.mallStoreId, id: this.label_id, type: this.label_type, page: this.searchForm.page, limit: this.searchForm.limit, sort: this.sort, price_start: this.price_start, price_end: this.price_end },
          this.searchForm,
          false
        );
        if (status != 1)
          return (
            uni.showToast({
              title: message,
              icon: "none",
            }) && resolve(false)
          );
        if (this.searchForm.page == 1) {
          this.goodsList = data;
        } else {
          this.goodsList.push.apply(this.goodsList, data);
          // this.getDataList();
        }
        this.searchForm.page++;
        this.canLoad = this.goodsList.length == data.count ? false : true;

        this.$nextTick(() => {
          this.getDataList();
          this.isLoading = false;
          resolve(true);
        });
      });
    },




    async getDataList() {
      //  const {
      //       status,
      //       data: { list, count },
      //       message,
      //  } = await this.$request(
      //       "SmallProgramApi/Shopping/getShoppingGoods_v4",
      //       { store_id: this.$store.mallStoreId }
      //  );
      //购物车的数据
      this.goodsList.forEach((item) => {
        let matchedItem = this.$store.merShoppingGoodsList.find(
          (el) => el.goods_id === item.id
        );
        if (matchedItem) {
          item.num = matchedItem.num;
        } else {
          this.indexes = []
          item.num = 0;
        }
      });

      console.log(this.goodsList, 'this.goodsList')

      this.goodsList.forEach((item, index) => {
        if (item.num > 0) {
          this.indexes.push(index);
        }
      });
      this.indexes = [...new Set(this.indexes)];
      this.$forceUpdate();
    },

    buttonClass(item) {
      if (item.num === 0) {
        return true;
      }
      if (item.count > 0) {
        return false;
      }
    },



    // 展示plus会员价条件
    showPlusPrice(item) {
      return app.showPlusPrice(item);
    },

    // 展示会员价条件
    showVipPrice(item) {
      return app.showVipPrice(item);
    },

    // 展示普通价格
    showOnlinePrice(item) {
      return app.showOnlinePrice(item);
    },
  },
  onShareAppMessage(res) {
    return {
      title: "商品分类",
      path: "/pages/mer/tabbar/category/category",
    };
  },
};
</script>


<style lang="less">
@import "../../../../static/css/common-goods.css";
</style>

<style lang="less">
@import "../category/category.css";
</style>



<style lang="less" scoped>
.animationIcon {
  position: relative;
  top: 140rpx;
  left: 444rpx;
  z-index: 999;
}

.balt,
.baltRight {
  position: absolute;
  background: red;
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  z-index: 99999;
}

.inner,
.innerRight {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 99999;
}

.balt {
  animation: moveX 1s 1;
}

.inner {
  animation: moveY 1s cubic-bezier(1, -1, 1, 10) 1;
}

.baltRight {
  animation: moveXR 1s 1;
}

.innerRight {
  animation: moveYR 1s cubic-bezier(1, -1, 1, 10) 1;
}

@keyframes moveX {
  50% {
    transform: translateX(-200px);
  }

  100% {
    transform: translateX(-200px);
  }
}

@keyframes moveY {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}

@keyframes moveXR {
  50% {
    transform: translateX(180px);
  }

  100% {
    transform: translateX(180px);
  }
}

@keyframes moveYR {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}
</style>

<style lang="scss">
/******************/


.search-box {
  display: flex;
  align-items: center;
  height: 75rpx;
  padding-top: 12rpx;
  padding-bottom: 12rpx;
  padding-left: 30rpx;
  // padding-right: 75rpx;

  box-sizing: border-box;
  // background-color: #FFFFFF;
  // box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
  // z-index: 1;

  .search-content {
    border: 1px solid var(--primary-color);
    height: 64rpx;
    width: 60%;
    padding: 0 0 0 24rpx;
    // border: 2rpx solid var(--primary-color);
    // border: 2rpx solid #76BE16;
    background-color: #ffffff;
    border-radius: 34rpx;
    box-sizing: border-box;

    // background: #F7FFEC;
    .search-icon {
      font-size: 28rpx;
      color: #999999;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
      line-height: 46rpx;
      color: #cccccc;
      margin: 0 10rpx;
    }

    .search-btn {
      width: 124rpx;
      height: 100%;
      font-size: 28rpx;
      color: #000;
      text-align: center;
      line-height: 46rpx;
      // background-color: var(--primary-color);
      border-radius: 32rpx;
      margin-right: -1rpx;
    }
  }
}

.top-box {

  // background-repeat: no-repeat;
  // background-size: cover;
  // background-position: center;
  // background: linear-gradient( 180deg, #FFD7B9 0%, #FFE7BE 67%, #FFFFFF 100%);

  background-color: #FFF9EF;
  box-shadow: 0rpx 8rpx 12rpx 2rpx rgba(22, 38, 0, 0.1);
  z-index: 9;

  // border-radius: 0rpx 0rpx 16rpx 16rpx;
  .top-content {
    // background: #F7FFEC;
    border-radius: 0rpx 0rpx 16rpx 16rpx;

    // background: linear-gradient(
    //   to right,
    //   rgba(var(--primary-rgb-color), 0.1),
    //   #ffffff
    // );
  }
}

.first-category-box {
  height: 160rpx;
  position: relative;
  top: 20rpx;
  // background-color: #F8F8F8;
  // background: linear-gradient(to right, rgba(var(--primary-rgb-color), 0.1), #FFFFFF);

  .first-category-scroll {
    overflow-x: auto;
    white-space: nowrap;
    word-break: keep-all;

    .first-category-item-box {
      // overflow: hidden;
      min-width: 100%;
      height: 100%;
    }
  }

  .first-category-btn {
    width: 80rpx;
    font-size: 26rpx;
    line-height: 32rpx;
    color: #000;
    // color: var(--primary-color);
    padding: 0 26rpx;
    box-sizing: border-box;
    height: 90%;
    margin-bottom: 20rpx;
    box-shadow: -8rpx 0rpx 12rpx 2rpx rgba(22, 38, 0, 0.1);
    z-index: 99;

    .first-category-icon {
      font-size: 24rpx;
    }
  }
}

.first-category-item {
  width: 130rpx;
  display: inline-flex;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 10rpx;
  height: 100%;

  &:nth-child(1) {
    margin-left: 12rpx;
  }

  &:nth-last-child(1) {
    margin-right: 12rpx;
  }

  .first-category-name {
    font-size: 24rpx;
    line-height: 40rpx;
    color: #333333;
    margin-top: 6rpx;

    &.active {
      font-size: 24rpx;
      color: var(--primary-color);
      margin-top: 4rpx;
    }
  }
}

.category-content {
  background-color: #ffffff;
  box-sizing: border-box;
  // box-shadow: 0rpx -8rpx 12rpx 2rpx rgba(22,38,0,0.1);
}

.category-left-box {
  width: 184rpx;
  // height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #F0F2EE;

  .category-left-item {
    width: 100%;
    min-height: 100rpx;
    box-sizing: border-box;
    color: #333333;
    font-size: 28rpx;
    line-height: 48rpx;
    position: relative;
    padding: 0 16rpx;

    .category-left-item-name {
      text-align: center;
    }

    &.active {
      color: var(--primary-color);
      background-color: #ffffff;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 30rpx;
        width: 10rpx;
        height: 40rpx;
        background: var(--primary-color);
        border-radius: 0 8rpx 8rpx 0;
      }
    }
  }
}

.category-right-box {
  .category-right-top-box {
    width: 100%;
    height: 50rpx;
    overflow-x: auto;
    margin-top: 16rpx;
    padding: 0 16rpx;
    white-space: nowrap;

    .category-third-item {
      height: 50rpx;
      padding: 0 28rpx;
      border-radius: 32rpx;
      display: inline-flex;
      vertical-align: top;
      font-size: 26rpx;
      line-height: 46rpx;
      color: #333333;
      background-color: #f8f8f8;
      margin-right: 12rpx;
      box-sizing: border-box;

      &.active {
        color: var(--primary-color);
        border: 2rpx solid var(--primary-color);
        background-color: #ffffff;
      }
    }
  }

  .goods-content {
    padding-left: 16rpx;
    box-sizing: border-box;

    .goods-item {
      // height: 216rpx;
      padding: 10rpx 15rpx;
      box-sizing: border-box;

      .goods-item-right-box {
        margin-left: 20rpx;
        height: 100%;
        padding: 10rpx 0rpx;

        .goods-name {
          width: 170px;
          font-weight: bold;
          font-size: 24rpx;
          color: #333333;
          line-height: 28rpx;
          box-sizing: border-box;
          // height: 200rpx;
          display: flex;
          align-items: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .goods-price-box {
          font-size: 32rpx;
          line-height: 36rpx;
        }

        .add-car-icon {
          color: var(--primary-color);
          font-size: 52rpx;
          margin-bottom: 6rpx;
        }
      }
    }
  }
}

.popup-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.39);

  .popup-title {
    color: #000;
    font-size: 28rpx;
    line-height: 36rpx;
    padding: 22rpx 14rpx 22rpx 24rpx;
    background-color: #FFF9EF;

    .close-popup-icon {
      font-size: 22rpx;
      padding: 10rpx;
    }
  }

  .popup-content {
    background-color: #FFF9EF;
    width: 100%;
    padding: 0 14rpx;
    max-height: 68vh;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 0 0 16rpx 16rpx;

    .first-category-item {
      width: 122rpx;
      margin-left: 25rpx;
      margin-bottom: 22rpx;
      padding: 0;

      &:nth-child(5n + 1) {
        margin-left: 0;
      }

      .first-category-name {
        font-size: 26rpx;
        line-height: 46rpx;
        margin-top: 4rpx;
      }
    }
  }
}

.pad-r-16 {
  padding-right: 16rpx;
}

.pad-r-6 {
  padding-right: 6rpx;
}

.pad-r-24 {
  // padding-right: 24rpx;
}
</style>
